<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/fastreply'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店：">
              <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                  <el-option
                      v-for="item in shopList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="适用范围：">
            <el-select
              style="width: 250px"
              clearable
              v-model="paging.type"
              placeholder="请选择"
            >
                <el-option label="全部" value="0"> </el-option>
                <el-option label="项目订单" value="1"> </el-option>
                <el-option label="商品订单" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-plus"
            @click="isInfo = true"
            style="margin-left: auto"
            type="primary"
            >新增</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column prop="id" label="编号" >
          </el-table-column>
          <el-table-column prop="username" label="适用范围">
            <template slot-scope="scope">
              <span>{{ scope.row.type | typeName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="快捷回复话术">
          </el-table-column>
          <el-table-column prop="price" label="操作" align="right">
            <template slot-scope="scope">
              <span @click="setRow(1, scope.row)" class="tab-table-text"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <el-dialog title="新增快捷回复话术" width="500" :visible.sync="isInfo">
      <!-- width="570px" -->
      <el-form :model="form" label-width="140px" class="demo-ruleForm">
        <el-form-item label="适用范围">
          <el-select
            style="width: 250px"
            clearable
            v-model="form.type"
            placeholder="请选择"
          >
            <el-option label="全部" value="0"> </el-option>
            <el-option label="项目订单" value="1"> </el-option>
            <el-option label="商品订单" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in domains"
          :label="'快捷回复话术' + (index + 1)"
          :key="index"
        >
          <el-input class="input-hua" v-model="domain.title"></el-input>
          <span class="tab-table-text" @click="adddomains()">新增</span>
          <span
            class="tab-red-text"
            v-if="index != 0"
            @click="domains.splice(index, 1)"
            >删除</span
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" :loading="isBtn" @click="addLabel(1)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑快捷回复话术" width="500" :visible.sync="isSet">
      <!-- width="570px" -->
      <el-form
        :model="form"
        ref="form"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="适用范围">
          <span v-if="form.type == 0">全部</span>
          <span v-if="form.type == 1">项目订单</span>
          <span v-if="form.type == 2">商品订单</span>
        </el-form-item>
        <el-form-item label="快捷回复话术">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSet = false">取 消</el-button>
        <el-button type="primary" :loading="isBtn" @click="addLabel()"  
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      isBtn: false,
      isInfo: false,
      isSet:false,
      isLoading: false,
      paging: {
        store_id: '',
        type: "",
        page: 1,
        limit: 10,
        total: 0, //总数
      },
      form: {
        id: "",
        type: "",
        content: "",
      },
      domains: [{ title: "" }],
      tableData: [],
      shopList: []
    };
  },
  created() {
    this.GetList();
    this.homegetStore()
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "全部";
          break;
        case 1:
          val = "项目订单";
          break;
        case 2:
          val = "商品订单";
          break;
      }
      return val;
    },
  },
  methods: {
    async homegetStore(){
        let {code,data} = await this.$Http.homegetStore();
        if(code){
            this.shopList = data;
        }
    },
    // 查询
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GetList();
    },
    async setRow(type, row) {
      this.isSet = true;
      this.form.type = JSON.stringify(row.type);
      this.form.content = row.content;
      this.form.id = row.id;
    },
    adddomains() {
      this.domains.push({ title: "" });
    },
    // 添加标签
    async addLabel(type, params) {
      if (type == 1) {
        if (!this.form.type) {
          this.utils.message("适用范围不能为空！");
          return false;
        }
        if (this.domains.length) {
          let arr = [];
          for (let j = 0; j < this.domains.length; j++) {
            if (!this.domains[j].title) {
              this.utils.message(`快捷回复话术${j + 1}不能为空，请输入`);
              return false;
            } else {
              arr.push(this.domains[j].title);
            }
          }
          if (arr.length.length > 1) {
            this.form.content = arr.join("@");
          } else {
            this.form.content = arr.join(",");
          }
        } else {
          this.utils.message("快捷回复话术不能为空！");
          return false;
        }
      } else {
        if (!this.form.content) {
          this.utils.message("快捷回复话术不能为空！");
          return false;
        }
      }
      this.isBtn = true;
      let { code, data } = await this.$Http.setQuick(this.form);
      if (code) {
        if (this.form.id) {
          this.$message.success("编辑成功");
        } else {
          this.$message.success("添加成功");
        }
        this.form = this.$options.data().form;
        this.domains = [{ title: "" }];
        this.GetList();
        this.isInfo = false;
        this.isSet = false;
      }
      this.isBtn = false;
    },
    // 获取标签列表
    async GetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getQuick(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    // 关闭弹窗
    closeDialog() {
      this.isInfo = false;
      this.isSet = false;
      this.domains = [{ title: "" }];
      this.form = this.$options.data().form;
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.GetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.input-hua {
  width: 380px;
  margin-right: 10px;
}
</style>